<template>
  <div>
    <div>
      <el-table ref="multipleTableRef" :data="tabledata" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" ></el-table-column>
        <el-table-column property="yq" label="院区"  />
        <el-table-column property="dz" label="地址"  />
        <el-table-column property="tel1" label="电话1"  />
        <el-table-column property="tel2" label="电话2"  />
        <el-table-column property="gj" label="公交"  />
        <el-table-column property="czsj" label="操作时间"  />
        <el-table-column property="cz" label="操作" >
          <template #default="scope">
          <el-icon @click="editUser(scope.row.id)">
            <Edit />
          </el-icon>&nbsp;&nbsp;
          <el-icon @click="deleteUser(scope.row.id)">
            <Delete />
          </el-icon>
        </template>
        </el-table-column>
      </el-table>
    </div>

    <div class="demo-pagination-block">
      <el-pagination :current-page="currentPage" :page-size="pageSize" :page-sizes="[10, 20, 30, 40]" :small="small"
        :background="background" layout="total, sizes, prev, pager, next, jumper" :total="total"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { Edit, Delete } from '@element-plus/icons-vue'
import { ref } from 'vue'
import { ElTable,ElIcon, emitChangeFn,ElMessage, ElMessageBox } from 'element-plus'
import type { IHospitalUser } from '@/typings/HospitalType'
import {deleteIdToUserApi} from '@/api/hospitalApi'
import { useRouter, useRoute } from 'vue-router'
interface Iprops {
  tabledata: IHospitalUser[]
  total: number
  pageSize: number
  loadData: (currentPage: number, pageSize: number, formdata?: Record<string, string>) => void
  currentPage: number
}
const props = defineProps<Iprops>()
const small = ref(false)
const background = ref(false)

const handleSizeChange = (val: number) => {
  props.loadData(props.currentPage, val)
}
const handleCurrentChange = (page: number) => {
  props.loadData(page, props.pageSize)
}

const multipleTableRef = ref<InstanceType<typeof ElTable>>()
const multipleSelection = ref<IHospitalUser[]>([])

const router=useRouter()
const editUser=(id:number)=>{
  router.push(`/hospital/yrdh/Counrtyard/${id}`)
}
const deleteUser=(id:number)=>{
  try{
  ElMessageBox.confirm(
    '您真的要删除此信息吗',
    '提示',
    {
      confirmButtonText: '确定删除',
      cancelButtonText: '取消删除',
      type: 'warning',
    }    
  ).then(async() => {
    let ret = await deleteIdToUserApi(id)
    if(ret.code==0){
    props.loadData(props.currentPage, props.pageSize)
    }
    })
  .catch(() => {
    ElMessage({
        type: 'info',
        message: 'Delete canceled',
      })
    })
  }catch(error){}
}
interface IEmits{
  (e:'onselectUserIds',id:number[],form:IHospitalUser[]):void
}
const emit=defineEmits<IEmits>()
const handleSelectionChange=(row:IHospitalUser[])=>{
  let selectUserIds=[...row].map(({id})=>id)
  emit('onselectUserIds',selectUserIds,[...row])
}
</script>

<style scoped>
.demo-pagination-block {
  float: right;
  margin-top: 10px;
}


</style>